#HE_GRID_SHEET {
  margin: 10px;
  background-color: rgb(237, 237, 237);
  padding: 15px;
  border-radius: 10px;
}

#HE_GRID {
  border-collapse: collapse;
  font-family: "Calibri", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  user-select: none;
  margin-top: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.HE_GRID_SHEETTITLE {
  font-family: "Calibri", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  font-weight: bolder;
  color: black;
  padding-left: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.HE_GRID_COMMANDBAR {
  background-color: rgb(255, 255, 255);
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  height: 140px;
  box-shadow: 0px 1px 4px 1px rgb(214, 214, 214);
  display: flex;
  overflow-x: hidden;
}

.HE_GRID_COMMANDBAR a {
  text-decoration: none;
  color: black;
  margin: 0;
  padding: 0;
}

/* Icon Container Styles */
.HE_GRID_ICONCONTAINER {
  font-size: 10px;
  border-radius: 10px;
  padding: 5px 5px 15px;
  margin-right: 20px;
  width: 70px;
  text-align: center;
  text-decoration: none;
  background-color: rgb(248, 248, 248);
  transition: ease-in-out 0.2s;
  box-shadow: 1px 1px 4px 1px rgb(214, 214, 214);
}

.HE_GRID_ICONCONTAINER:hover {
  background-color: rgb(250, 250, 250);
  opacity: 75%;
  text-decoration: none;
  transition: ease-in-out 0.2s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.HE_GRID_ICONCONTAINER:active {
  background-color: rgb(232, 232, 232);
  opacity: 75%;
  text-decoration: none;
  transition: ease-in-out 0.05s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.HE_GRID_ICONSMALL {
  font-size: 25px;
  color: #808080;
  text-decoration: none;
  padding: 10px;
}

/* Formula Controls Styles */
.HE_GRID_FORMULACONTROLS {
  background-color: none;
  margin-bottom: 10px;
  border-radius: 10px;
  height: auto;
  font-size: 0;
  display: flex;
}

.HE_GRID_FORMULACONTROLS_SUBTEXT,
.HE_GRID_FORMULACONTROLS_CTRLTEXT {
  margin: 0;
  padding: 0;
  color: black;
  text-decoration: none;
}

.HE_GRID_FORMULACONTROLS_CTRLTEXT {
  font-size: 10px;
  color: slategrey;
}

.HE_GRID_TD,
.HE_GRID_DISABLEDTD {
  border: solid 1px rgb(201, 201, 201);
  width: 100px;
  max-width: 200px;
  text-align: left;
  background-color: rgb(255, 255, 255);
  text-wrap: wrap;
  word-wrap: break-word;
  overflow: hidden;
}

.HE_GRID_DISABLEDTD {
  background-color: rgb(209, 209, 209);
}

.HE_GRID_TD_INVALID {
  background-color: rgb(255, 221, 221);
  animation: flash 1s infinite linear;
}

.HE_GRID_HEADERDISPLAY,
.HE_GRID_INDEX {
  background-color: rgb(237, 237, 237);
  border: solid 1px rgb(201, 201, 201);
  border-left-style: none;
  border-top-style: none;
  text-align: center;
  font-weight: bold;
  transition: ease-in-out 0.2s;
}

.HE_GRID_HEADERDISPLAY:hover,
.HE_GRID_INDEX:hover {
  background-color: rgb(243, 243, 243);
  color: rgb(255, 255, 255);
  overflow: auto;
}

.HE_GRID_HEADERDISPLAY {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  color: rgb(31, 113, 229);
}

.HE_GRID_INDEX {
  width: 60px;
  min-width: 60px;
  max-width: 200px;
  color: grey;
}

.HE_GRID_INDEX:hover {
  background-color: rgb(214, 214, 214);
}

@keyframes flash {
  0% {
    background-color: lightpink;
  }
  50% {
    background-color: rgb(255, 102, 102);
  }
  100% {
    background-color: lightpink;
  }
}

td.HE_GRID_SELECTED_CELL {
  border: 3px solid rgb(31, 113, 229);
  margin: 0;
  transition: 0.1s ease-in;
}

td.HE_GRID_SELECTEDCELL_ADDITIONALBG {
  background-color: rgb(236, 243, 255);
  transition: 0.1s ease-in;
}

td.HE_GRID_NOBOTTOMBORDER {
  border-bottom: solid 1px rgb(201, 201, 201) !important;
}

td.HE_GRID_NOTOPBORDER {
  border-top: solid 1px rgb(201, 201, 201) !important;
}

td.HE_GRID_COPIED_CELL {
  background-image: linear-gradient(
      90deg,
      rgb(31, 113, 229) 50%,
      transparent 50%
    ),
    linear-gradient(90deg, rgb(31, 113, 229) 50%, transparent 50%),
    linear-gradient(0deg, rgb(31, 113, 229) 50%, transparent 50%),
    linear-gradient(0deg, rgb(31, 113, 229) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 3px, 15px 2px, 2px 15px, 2px 15px;
  background-position: left top, right bottom, left bottom, right top;
  animation: border-dance 1s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: left top, right bottom, left bottom, right top;
  }
  100% {
    background-position: left 15px top, right 15px bottom, left bottom 15px,
      right top 15px;
  }
}

/* Text Area Styles */
.HE_GRID_TEXTAREA,
#HE_GRID_NAMEDRANGELIST,
#HE_GRID_FORMULABAR {
  width: 100%;
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.HE_GRID_SELECTLIST {
  font-family:sans-serif;
  min-width:100%;
  font-size:15px;
  padding:20px;
  border-radius: 10px;
  border:3px solid rgb(40, 213, 236);
}

#HE_GRID_NAMEDRANGELIST,
#HE_GRID_FORMULABAR {
  font-size: small;
}

#HE_GRID_FORMULABAR {
  margin-left: 10px;
  flex: 100;
}

/* Button Styles */
#HE_GRID_CANCELTOGGLE,
#HE_GRID_APPROVETOGGLE,
#HE_GRID_FUNCTIONTOGGLE {
  width: 35px;
  margin: 0;
  border: none;
  background-color: white;
  font-size: small;
  color: rgb(170, 170, 170);
  transition: ease-in-out 0.1s;
}

#HE_GRID_CANCELTOGGLE {
  border-right-style: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0px 1px 4px 1px rgb(214, 214, 214);
}

#HE_GRID_APPROVETOGGLE {
  border-left-style: none;
  border-right-style: none;
  box-shadow: 4px 1px 4px 1px rgb(214, 214, 214);
}

#HE_GRID_FUNCTIONTOGGLE {
  border-left-style: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 3px 1px 3px 1px rgb(214, 214, 214);
}

#HE_GRID_CANCELTOGGLE:hover,
#HE_GRID_APPROVETOGGLE:hover,
#HE_GRID_FUNCTIONTOGGLE:hover {
  background-color: rgb(233, 233, 233);
  box-shadow: none;
  transition: ease-in-out 0.2s;
  color: rgb(133, 128, 128);
}

#HE_GRID_CANCELTOGGLE:active,
#HE_GRID_APPROVETOGGLE:active,
#HE_GRID_FUNCTIONTOGGLE:active {
  background-color: rgb(209, 209, 209);
  box-shadow: none;
  transition: ease-in-out 0.05s;
  color: rgb(133, 128, 128);
}

/* Additional Styles */
.HE_GRID_CELLINPUT:focus {
  border: none;
  outline: none;
  width: 100%;
}

.HE_GRID_BOTTOMROW {
  height: 30px;
}

.HE_GRID_TABLEWRAPPER {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  overflow: auto;
  white-space: nowrap;
}

/* Context Menu Styles */
.HE_GRID_CONTEXTMENU {
  border-radius: 5px;
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #e4e4e4;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: 0.07s ease-out;
}

.HE_GRID_CONTEXTMENU:hover {
  box-shadow: none;
  transition: 0.01s ease-out;
}

.HE_GRID_CONTEXTMENUITEM {
  padding: 8px 12px;
  cursor: pointer;
  transition: 0.2s ease-out;
}

.HE_GRID_CONTEXTMENUITEM:hover {
  background-color: #e4e4e4;
  color: grey;
  transition: 0.2s ease-out;
}